<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/header.css" rel="stylesheet" />
		<link href="../css/new_pyq_index.css" rel="stylesheet" />
	</head>
	<body>
		<!--头部标题栏 -->
<!-- 		<header class="mui-bar mui-bar-nav title pyq-top-top">
			<span class="pyq-out" id="pyq_out"><</span>
			<span>
			<h1 class="mui-title title-color">朋友圈</h1>
			</span>
			<span  class="pyq-top"><img src="../images/xiangji.png" class="pyq-top-img" id="pyq_out_release"></span>
		</header> -->
		
		<header class="mui-bar mui-bar-nav title pyq-top-top">
			<a id="pyq_out" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
			<a id="pyq_out_release" class="mui-icon mui-pull-right">📸</a>
			<h1 class="mui-title title-color"><b>朋友圈</b></h1>
		</header>
		
		<!-- 主体部分 -->
		<div>
			<div>
				<img src="../images/bg.png" class="pyq-subject-top-img">
				<div>
					<div class="pyq-subject-me">
					
					<span id="span_nickname""><b>千言</b></span>
					<!-- <span class="pyq-subject-head_portrait" id="img_my_face"><img src="../images/xiangji.png" ></span> -->
					<img src="../images/ask.jpg" style="width: 60px;height: 60px;border-radius: 8px;"id="img_my_face">
				</div>
				</div>
				
			</div>
			
			
			<ul class="pyq-subject-content" id="puqaddul">
				<li class="pyq-subject-content-li">
					<!-- 用户头像和用户名 -->
<!-- 					<div id="pyqadduser">
						<span ><img src="../images/xiangji.png" class="img_my_face_subject"></span>
						<span class="span_nickname_subject">11111</span>
					</div> -->
					<!-- 发布的信息 -->
<!-- 					<div class="pyq-subject-cibtebt-img-outside">
						<p>111111111</p>
						
					</div> -->
					<!-- 发布的图片 -->
<!-- 					<div class="pyq-subject-cibtebt-img-min-outside">
						
							<img src="../images/bird.png" class="pyq-subject-cibtebt-img-min">
							<img src="../images/good.png" class="pyq-subject-cibtebt-img-min">
							<img src="../images/bird.png" class="pyq-subject-cibtebt-img-min">
							<img src="../images/good.png" class="pyq-subject-cibtebt-img-min">
							<img src="../images/bird.png" class="pyq-subject-cibtebt-img-min">
							<img src="../images/good.png" class="pyq-subject-cibtebt-img-min">
							<img src="../images/bird.png" class="pyq-subject-cibtebt-img-min">
							<img src="../images/good.png" class="pyq-subject-cibtebt-img-min">
							<img src="../images/bird.png" class="pyq-subject-cibtebt-img-min">
						
					</div> -->
					<!-- //点赞和更多 -->
<!-- 					<div class="pyq-subject-cibtebt-function">
						<div class="pyq-subject-cibtebt-function-dianzan" onclick="Modifypicture()">
							<img src="../images/aixingkong.png" id="pyqlove">
							<span>11111</span>
						</div>
						<div class="pyq-subject-cibtebt-function-comment">
							
							<span class="pyq-subject-cibtebt-function-comment-span-block" id="dianzan">点赞</span>
							<span class="pyq-subject-cibtebt-function-comment-span-block" id="pinglun">评论</span>
							<img src="../images/gengduo128.png" >
						</div>
						
					</div> -->
					<!-- 1评论 -->
<!-- 					<div class="pyq-subject-comment-div" >
							<ul class="pyq-subject-comment-ul">
								<li >
									<span id="pyq-subject-comment-uname">用户名</span><span>:</span>
									<span id="pyq-subject-comment-content">111122221233313111332</span>
								 </li>
								
							</ul>
							<div class="pyq-subject-comment-div-div" id="inputandbtn">
								<input placeholder="请输入评论" type="text" id="pyqinput"/>
								<button class="pyq-subject-comment-div-div-btn" onclick="SendRequest()">确定</button>
							</div>
							
					</div>
				</li> -->
			</ul>
			

			
		</div>
		
	</body>
	<script src="../js/mui.js"></script>
	<script src="../js/app.js"></script>
	<script type="text/javascript">
		mui.init();
		


		var flage=[];
		var pyqallid=[];
		
		var userid="";
		var username="";
		
		var commenttext="";
		
		
		var pyqaddusername="";
		var arra=0;
		window.onload=function(){
			window.addEventListener('refresh',function(){
				location.reload();
		})
		}
		mui.plusReady(function() {
			refreshUserInfo();
			
			var puqaddul;
			var li;
			
			//退出朋友圈
			var pyq_out = document.getElementById("pyq_out");
			pyq_out.addEventListener("tap", function() {
				mui.back();
			});
			
			;
			//获取好友名称和id
			var frienduname=[];
			var friendid=[];
			var friends= app.getContactList().length;
			for(var j=0;j<friends;j++){
				frienduname[j] = app.getContactList()[j].friendNickname;
				
				friendid[j]=app.getContactList()[j].friendUserId;
			}
			userid =app.getUserGlobalInfo().id;
			username=app.getUserGlobalInfo().nickname;
			
			

			// console.log(friends);
			// console.log(userid);
			// console.log(username);
			//根据好友获取pyq数据库数据
			mui.ajax(app.serverUrl + "/user/selectpyqall", {
				data: {
					id: "",
					page: 1,//是否分页
					limit: 10//每页数量
				},
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success:function(data) {
						console.log(data);
						
						var res=JSON.parse(data);
							
							
							
						if (res.code == "200") {
							
							puqaddul = document.getElementById("puqaddul");
							
							for(var i =res.count-1;i>=0;i--){
								var flagaddpyq=false;
								var date=res.data[i];
								
								if(userid!=date.pyquserid){
									for(var z = 0;z<friends;z++){
										if(date.pyquserid==friendid[z]){
											flagaddpyq=true;
											pyqaddusername=frienduname[z];
											flage[arra]=0;
											continue;
										
										}
									}
								}else if(userid==date.pyquserid){
									flagaddpyq=true;
									pyqaddusername=username;
									flage[arra]=1;
								}
								
								
								if(flagaddpyq){
									pyqallid[arra]=date.id;
									
									
									
									//用户头像和用户名
									 li = document.createElement("li");
									 li.id=date.id;
									 console.log(date.id);
									var divuser = document.createElement("div");
									var spanimg = document.createElement("span");
									var userimg=document.createElement("img");
									var spanuname = document.createElement("span");
									//图片地址
									var a2=app.getContactList();
									console.log(a2);
									var a1;
									
									console.log(date.pyquserid);
									
									for(var gggg=0;gggg<a2.length;gggg++){
										if(date.pyquserid==a2[gggg].friendUserId){
											a1=a2[gggg].friendFaceImage;
										
										}
										console.log(a1);
									}
								if(date.pyquserid==userid){
									userimg.src=app.imgServerUrl +app.getUserGlobalInfo().faceImage;
									
								}else{
									userimg.src=app.imgServerUrl +a1;
								}
									
									
									userimg.className="img_my_face_subject";
									spanimg.prepend(userimg);
									spanuname.innerText=pyqaddusername;
									spanuname.className="span_nickname_subject";
									divuser.prepend(spanuname);
									divuser.prepend(spanimg);
									
								
									//发布的信息
									var divp = document.createElement("div");
									var textp=  document.createElement("p");
									divp.className="pyq-subject-cibtebt-img-outside";
									textp.innerHTML=date.pyqtext;
									divp.prepend(textp);
									
									
									//发布的图片
									var divimg = document.createElement("div");
									divimg.className="pyq-subject-cibtebt-img-min-outside";
									
									var imglist = [];
									
									imglist=date.pyqimgsrc.split(",");
									
									 for(var x=0;x<imglist.length-1;x++){
										var imgaddsrc = document.createElement("img");
										imgaddsrc.className="pyq-subject-cibtebt-img-min";
										imgaddsrc.src=app.imgServerUrl +imglist[x];
										divimg.prepend(imgaddsrc);
									}
									
									
									
									
									//点赞和更多
									//点赞部分
									var divdzgd=document.createElement("div");
									divdzgd.className="pyq-subject-cibtebt-function";
									var divdz=document.createElement("div");
									divdz.className="pyq-subject-cibtebt-function-dianzan";
									var divgd=document.createElement("div");
									divgd.className="pyq-subject-cibtebt-function-comment";
									var imgaixing = document.createElement("img");
									imgaixing.src="../images/aixingkong.png";
									
									imgaixing.id="aixin"+arra;
									
									var spanaixing = document.createElement("span");
									spanaixing.innerText=date.pyqlove;
									divdz.prepend(spanaixing);
									divdz.prepend(imgaixing);
									
									//更多部分
									var spangddz=document.createElement("span");
									spangddz.className="pyq-subject-cibtebt-function-comment-span";
									spangddz.innerText="点赞";
									spangddz.addEventListener("click",Modifypicture);
									
									var spangdpl=document.createElement("span");
									spangdpl.innerText="评论";
									spangdpl.className="pyq-subject-cibtebt-function-comment-span";
									spangdpl.addEventListener("click",CommentsPopUp);
									

									
									
									
									spangddz.id="dianzan"+"_"+arra;
									spangdpl.id="pinglun"+"_"+arra;
									
									
									
									var imggd = document.createElement("img");
									imggd.src="../images/gengduo128.png";
									imggd.addEventListener("click",Expandmore);
									imggd.id="gengduo_"+arra
									//imggd.addEventListener("click",tapButtonAction);
									
									
									
									divgd.prepend(imggd);
									divgd.prepend(spangdpl);
									divgd.prepend(spangddz);
									
									
								if(flage[arra]==1){
									
									var spangdsc=document.createElement("span");
									spangdsc.innerText="删除";
									spangdsc.style.color="#f00";
									spangdsc.className="pyq-subject-cibtebt-function-comment-span";
									spangdsc.addEventListener("click",CommentsDelect);
									spangdsc.id="shanchu"+"_"+arra;
									divgd.prepend(spangdsc);
									
								}
								
									
									
									
									//添加到大div
									divdzgd.prepend(divgd);
									divdzgd.prepend(divdz);
									

									var divplru=document.createElement("div");
									var divpl=document.createElement("div");
									divplru.className="pyq-subject-comment-div-div";
									divplru.id="divpl"+arra;
									var input=document.createElement("input");
									input.placeholder="请输入评论";
									input.id="pyqinput"+"_"+arra;
									var button=document.createElement("button");
									button.className="pyq-subject-comment-div-div-btn";
									button.innerText="确定";
									button.id="pyqbutton"+"_"+arra;
									
									button.addEventListener("click",SendRequest);
									
									
									
									divplru.prepend(button);
									divplru.prepend(input);
									
									divpl.prepend(divplru);
									
									
									li.prepend(divpl);
									li.prepend(divdzgd);
									li.prepend(divimg);
									li.prepend(divp);
									li.prepend(divuser);
									puqaddul.append(li);
									
									arra++;
									
									
									
								}
								
								
								
							}
							
							
							
							
							
							
						} else{
							app.showToast(data.msg, "error");
						}
					
					}
				});
				
		
			showComment();

				
				
			
		});
		
		
		
		
		function showComment(){
			var commentid=[];
			mui.ajax(app.serverUrl + "/user/selectpyqComment", {
				data: {
					pyqId: "",
					page: 1,//是否分页
					limit: 10//每页数量
				},
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success:function(data) {
						console.log(data);
						var rescomment=JSON.parse(data);
						if(rescomment.code=="200"){
							
							
							for(var l=0;l<pyqallid.length;l++){
								
								for(var o=0;o<rescomment.count;o++){
									
									if(rescomment.data[o].pyqId==pyqallid[l]){
										commentid[o]=rescomment.data[o].id;
										var divpl=document.createElement("div");
										divpl.className="pyq-subject-comment-div";
										divpl.id=commentid[o];
										
										var ulpl = document.createElement("ul");
										ulpl.className="pyq-subject-comment-ul";
										var lipl=document.createElement("li");
										var spanpluname=document.createElement("span");
										spanpluname.innerText=rescomment.data[o].commentUName;
										console.log(JSON.stringify(rescomment.data[o]));
										var spanpltextm=document.createElement("span");
										spanpltextm.innerText=":";
										var spanpltext=document.createElement("span");
										spanpltext.innerText=rescomment.data[o].commentText;
								
										lipl.prepend(spanpltext);
										lipl.prepend(spanpltextm);
										lipl.prepend(spanpluname);
								
										ulpl.prepend(lipl);
								
										divpl.prepend(ulpl);
										
										document.getElementById(pyqallid[l]).appendChild(divpl);
									}
								}
								
							}
							
						}
						
						
						
						//<!-- 1评论 -->
					}
			});
		}
		
		//点击更多弹出点赞和评论
		function Expandmore(){
				var spilee=(event.target.id).split("_");
				
		if(flage[spilee[1]]==0){
			if(document.getElementById("dianzan"+"_"+spilee[1]).className =='pyq-subject-cibtebt-function-comment-span'){
				
				
				document.getElementById("dianzan"+"_"+spilee[1]).className='pyq-subject-cibtebt-function-comment-span-block';
				document.getElementById("pinglun"+"_"+spilee[1]).className='pyq-subject-cibtebt-function-comment-span-block';
			}else{
				
				document.getElementById("dianzan"+"_"+spilee[1]).className='pyq-subject-cibtebt-function-comment-span';
				document.getElementById("pinglun"+"_"+spilee[1]).className='pyq-subject-cibtebt-function-comment-span';
				document.getElementById("divpl"+spilee[1]).className='pyq-subject-comment-div-div';
			}
		}else{
			if(document.getElementById("dianzan"+"_"+spilee[1]).className =='pyq-subject-cibtebt-function-comment-span'){
				
				document.getElementById("shanchu"+"_"+spilee[1]).className='pyq-subject-cibtebt-function-comment-span-block';
				
				document.getElementById("dianzan"+"_"+spilee[1]).className='pyq-subject-cibtebt-function-comment-span-block';
				document.getElementById("pinglun"+"_"+spilee[1]).className='pyq-subject-cibtebt-function-comment-span-block';
			}else{
				document.getElementById("shanchu"+"_"+spilee[1]).className='pyq-subject-cibtebt-function-comment-span';
				document.getElementById("dianzan"+"_"+spilee[1]).className='pyq-subject-cibtebt-function-comment-span';
				document.getElementById("pinglun"+"_"+spilee[1]).className='pyq-subject-cibtebt-function-comment-span';
				document.getElementById("divpl"+spilee[1]).className='pyq-subject-comment-div-div';
			}
		}
				

			
			
		}
		
		function CommentsDelect(){
			var spilsc=(event.target.id).split("_");
			mui.ajax(app.serverUrl + "/user/DelectpyqById", {
				data: {
					id: pyqallid[spilsc[1]],
					
				},
					type: 'POST', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success:function(data) {
						var dattttta=JSON.parse(data);
						
						if(dattttta.code==200){
							console.log("00000000000000000000000");
							 location.reload();
						}
						
					}
					})
			
		}
		
		//点击爱心，图标变实心，调用修改点赞接口
		function Modifypicture(){
					var aixinsrc = (event.target.id).split("_");
					
	
					if(document.getElementById("aixin"+aixinsrc[1]).src!="../images/aixin.png"){
						document.getElementById("aixin"+aixinsrc[1]).src="../images/aixin.png"
	
						mui.ajax(app.serverUrl + "/user/uppyqlove", {
							data: {
								id: pyqallid[aixinsrc[1]]
							},
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							success:function(data) {
								console.log("111111111");
								
								 location.reload();
								
						}
						});
					}else{
						document.getElementById("aixin"+aixinsrc[1]).src="../images/aixingkong.png"
					}
			}
		
		//点击评论弹出输入框和确认按钮
		
		function CommentsPopUp(){
			var spiler=(event.target.id).split("_");
			//console.log(JSON.stringify(spiler));
			if(document.getElementById("divpl"+spiler[1]).className=="pyq-subject-comment-div-div"){
				document.getElementById("divpl"+spiler[1]).className='pyq-subject-comment-div-div-block';
				
				
			}else{
				document.getElementById("divpl"+spiler[1]).className='pyq-subject-comment-div-div';
				
				
			}
		}
		
		//点击确定按钮清空输入框，隐藏输入框和确认按钮和点赞和评论按钮
		function SendRequest(){
			var pyqbtn=(event.target.id).split("_");
			//console.log(pyqbtn);
			commenttext=document.getElementById("pyqinput"+"_"+pyqbtn[1]).value;
			console.log(commenttext);
			console.log(pyqallid[pyqbtn[1]]);
			username=app.getUserGlobalInfo().nickname;
			mui.ajax(app.serverUrl + "/user/addCommentinsert", {
				data:{
					commentText:commenttext,
					pyqId:pyqallid[pyqbtn[1]],
					commentUserId:userid,
					commentUName:username,
					
				},
				headers:{
				    "Content-Type":"application/json"
				},
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success:function(data) {
						console.log(JSON.stringify(data));
						if(data.status==200){
							location.reload();
						}
						
						}
			
			
			})
			
			

			
			
			document.getElementById("pyqinput"+"_"+pyqbtn[1]).value="";
			document.getElementById("divpl"+pyqbtn[1]).className='pyq-subject-comment-div-div';
			
			
			
			document.getElementById("dianzan"+"_"+pyqbtn[1]).className='pyq-subject-cibtebt-function-comment-span';
			document.getElementById("pinglun"+"_"+pyqbtn[1]).className='pyq-subject-cibtebt-function-comment-span';
			
			if(flage==1){
				document.getElementById("shanchu"+"_"+pyqbtn[1]).className='pyq-subject-cibtebt-function-comment-span';
			}
			
			
		}
		
			//前往发布
			var pyq_out_release = document.getElementById("pyq_out_release");
			pyq_out_release.addEventListener("tap", function() {
				mui.openWindow("send_2.html", "send_2.html");
			});
		

		


			//刷新登录用户信息的函数
			function refreshUserInfo(){
				var user = app.getUserGlobalInfo();
				var faceImage = user.faceImage;
				var nickname = user.nickname;
				
				var span_nickname = document.getElementById("span_nickname");
				
				//动态将个人信息展示到对应的容器中
				span_nickname.innerHTML = nickname;
				
				if(app.isNotNull(faceImage)){
					var img_my_face = document.getElementById("img_my_face");
					img_my_face.src = app.imgServerUrl+faceImage;
					console.log(app.imgServerUrl+faceImage);
				}
			}
		window.addEventListener("refresh", function(){
			 location.reload();
			
		});
		
		
	</script>
</html>